<script setup lang="ts">
defineProps<{
	systemContent: object,
	systemProps:object,
}>()

import { computed, ref } from 'vue';
// let currentImage = ref(imgScreen);
//         function power(e) {
// 					var image=imgScreen;
// 					if(e.button === 2){
// 						image=imgBlue;
// 					}
// 					if (currentImage.value) {
// 						currentImage.value = '';
// 					} else {
// 						currentImage.value = image;
// 					}
// 				}
//         const divStyle = computed(() => ({
//             height: '100%',
//             backgroundSize: 'cover',
//             backgroundImage: `url(${currentImage.value})`
//         }));
let powered = ref(true);
function power() {
	powered.value = !powered.value;
}
// const divStyle = computed(() => ({
//     height: '100%',
//     backgroundSize: 'cover',
//     backgroundImage: powered.value ? `url(${imgScreen})` : `url(${imgBlue})`
// }));
</script>

<template>
  <div class="monitor">	
			<div class="screen-border1">				
				<div class="screen-border2">
					<div class="screen">
						<!-- <div v-if="powered" class="screen-content"></div> -->
						<component v-if="powered" :is="systemContent" v-bind="systemProps"></component>
					</div>
					<div class="logo">D<span class="e">E</span>LL</div>
					<div class="buttons">
						<div class="button bar"></div>
						<div class="button bar"></div>
						<div class="button bar"></div>
						<div class="button bar"></div>
						<div class="button round" @mousedown="power"></div>
					</div>
				</div>

			</div>
			<div class="support"></div>
			<div class="base">
				<div class="rotater"></div>
			</div>
		</div>
</template>

<style scoped>
   
		.space{
			/* width: 100vw; */
			/* height: 100vh; */
			/* background-color: #313131; */
			/* position: relative; */
			display: flex;
			justify-content: center;
			align-items: center;		
		}
		.monitor{
			/* margin: auto; */
			/* perspective:1000px; */	
			perspective:80em;
		}
		.monitor .screen-border1{
		    width: 32em;
		    height: 19em;
		    background-color: #aaa;
		    border-radius: 1em;
		    /* box-shadow: 0.1em -0.1em 1em #fff; */
		    padding: 0.2em;
			display: flex;
		}
		.monitor .screen-border1 .screen-border2{
			position: relative;
		    width: 100%;
		    height: 100%;
		    background-color: #272727;
		    border-radius: 0.8em;
			box-sizing: border-box;
			padding:1em;
		}
		.monitor .screen-border1 .screen-border2 .screen{
		    width: 100%;
		    height: 100%;
		    /* background-image: url("./screen.png");			 */
			background-color: #000;
		    background-size: cover;
		    background-position: center;
		    
		}
		.monitor .screen-border1 .screen-border2 .logo{
		    color: #c0c0c0;
			font-size: 0.6em;		
			text-align: center;    
			font-weight: bold;
		}
		.monitor .screen-border1 .screen-border2 .logo .e{
			transform: rotateZ(-45deg);
    		display: inline-block;
		}
		.monitor .screen-border1 .screen-border2 .buttons{
		    position: absolute;
			top:0;
			right:0;
			width:1em;
			height: 100%;
		    display: flex;
		    flex-direction: column;
		    justify-content: flex-end;
		    align-items: center;			
		}
		.monitor .screen-border1 .screen-border2 .buttons .button{
		    color: white;
		}

		
		.monitor .screen-border1 .screen-border2 .buttons .bar{
		    width:0.7em;
		    height: 0.4em;
		    background-color: #000;
			border-radius: 0.5em;
			box-shadow: inset 0 0 0.1em #ccc;
			margin-bottom: 0.3em;
		}
		
		
		.monitor .screen-border1 .screen-border2 .buttons .round{
		    margin-bottom: 0.6em;
			margin-top: 0.6em;
		    width: 0.4em;
		    height: 0.4em;
		    border: 0.1em solid #fff;
		    border-radius: 50%;
			cursor: pointer;
		}
		
		.monitor .support{
			width: 5em;
			height: 3em;		  
			margin: auto;
		    background-color: #888;  
			position: relative;
			box-shadow:-0.5em 1em 0.8em rgba(0, 0, 0, 0.3);
			z-index: 2;			
		}
		.monitor .base{
		    width:16em;
			height: 15em;
			background-color: #6d6b6b;
			border-radius: 2em;
			transform: rotateX(85deg);
			transform-origin: center center;
			margin:-7.5em auto;
			
			display: flex;
			justify-content: center;
			align-items: center;			
			position: relative;
			box-shadow:0 3em 1em rgba(0, 0, 0, 0.8);
			z-index: 1;
			
		}
		.monitor .base .rotater{
			width: 8em;
			height: 8em;
			background-color: #636363;
			border-radius: 4em;
			transform: rotateX(-60deg);
			transform-origin: center center;
		}
		.monitor .screen-content{
			height: 100%;
		}
</style>
